<template>
  <div class="web__msg" @keyup.enter="handleSend">
    <textarea
      v-model="currentMsg"
      rows="3"
      :placeholder="placeholder"
      class="web__msg-input"
      ref="msgBox"
    />
    <template v-if="showEmoji">
      <el-popover placement="top-end" trigger="click" ref="popover">
        <ul class="emjioBox">
          <li v-for="item in Object.keys(emoji)" :key="item" @click="selectEmit(item)">
            <a v-if="emoji[item]&&emoji[item].position" :style="emojiStyle(item)"></a>
            <a v-else-if="emoji[item].length<5">{{emoji[item]}}</a>
            <img v-else :src="emoji[item]" />
          </li>
        </ul>
        <img class="toolIcon" slot="reference" src="../../assets/images/smile.png" alt="表情">
        <!-- <JwChat-icon class="toolIcon" slot="reference" type="icon-xiaolian" title="表情" /> -->
      </el-popover>
    </template>
    <div class="web__msg-menu">
      <!-- <el-button
        class="web__msg-submit"
        type="info"
        size="small"
        @click="handleSend"
        >发送(S)</el-button
      > -->
      <div class="ig" @click="handleSend">
        <img class="imgicon" src="../../assets/images/send.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import emoji from '@/utils/emoji'
export default {
  name: "JwChat_enterbox",
  props: {
    placeholder: {
      type: String,
      default: "请输入内容...",
    },
    value: {
      type: String,
      default: "",
    },
    insert: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      emoji,
      currentMsg: "",
      showEmoji: true,
    };
  },
  watch: {
    value: {
      handler() {
        this.currentMsg = this.value;
      },
      immediate: true,
    },
    currentMsg: {
      handler(newval) {
        const msg = newval.trim();
        this.$emit("input", msg);
      },
      immediate: true,
    },
    insert(newval) {
      if (newval) {
        this.joinToMsg(newval);
      }
    },
  },
  methods: {
    //用户主动发送
    handleSend(e) {
      const shiftKey = e.shiftKey;
      if (shiftKey) return;
      this.$emit("submit", this.currentMsg);
      this.$nextTick(() => {
        this.currentMsg = "";
      });
    },
    joinToMsg(str) {
      /* eslint-disable */
      const myField = this.$refs.msgBox;
      let afterMsg = this.currentMsg;
      //IE浏览器
      if (document.selection) {
        var sel = null;
        myField.focus();
        sel = document.selection.createRange();
        sel.text = str;
        sel.select();
      }

      //火狐/网景 浏览器
      else if (myField.selectionStart || myField.selectionStart == "0") {
        //得到光标前的位置
        var startPos = myField.selectionStart;
        //得到光标后的位置
        var endPos = myField.selectionEnd;
        // 在加入数据之前获得滚动条的高度
        var restoreTop = myField.scrollTop;
        afterMsg =
          afterMsg.substring(0, startPos) +
          str +
          afterMsg.substring(endPos, afterMsg.length);
        //如果滚动条高度大于0
        if (restoreTop > 0) {
          // 返回
          myField.scrollTop = restoreTop;
        }
        myField.focus();
        myField.selectionStart = startPos + str.length;
        myField.selectionEnd = startPos + str.length;
      } else {
        afterMsg += str;
        myField.focus();
      }
      this.currentMsg = afterMsg;
    },
    selectEmit (type) {
      console.log(type);
      this.$emit('emoji', type)
      this.$refs.popover.doClose()
    },
    emojiStyle (item) {
      const emojiitem = this.emoji[item]
      if (!emojiitem) return {}
      return {
        display: 'inline-block',
        background: `url('https://res.wx.qq.com/a/wx_fed/webwx/res/static/img/6AfH8-r.png')  no-repeat`,
        width: `28px`,
        height: `28px`,
        'background-position': emojiitem.position,
      }
    },
  },
};
</script>
<style scoped lang="scss">
.web__msg {
  padding: 20px 10px 0 10px;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  flex: 1;
  &-input {
    display: block;
    width: 100%;
    height: calc(14vh);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    resize: none;
    outline: 0;
    background-color: #fff;
    border: 0;
    word-break: break-all;
    font-size: 13px;
    line-height: 17px;
    -webkit-appearance: none;
  }
  &-menu {
    text-align: right;
  }
  &-submit {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
  }
}

::v-deep .el-button--info {
  background-color: #e9e9e9;
  color: #27c775;
  border: 0;
}

::v-deep .el-button--info:hover {
  background-color: #d2d2d2;
}

.emjioBox {
  background: #fff;
  height: 150px;
  width: 300px;
  overflow: auto;
  text-align: left;
  padding: 0;
  li {
    display: inline-block;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
  }
}

.toolIcon {
  width: 24px;
  height: 24px;
  // padding-left: 6px;
  margin-right: 20px;
  margin-top: 4px;
  font-size: 30px;
  color: rgba(112,124,151,0.5);
  // border: 3px solid rgba(112,124,151,0.5);
  &:hover {
    color: #76b1f9;
  }
}

.ig {
    background-color: #2A8BF2;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .imgicon{
    width: 20px; height: 20px;
  }
</style>
